<template>
  <div class="wrapper">

    <div>
      <el-container>

        <el-header>
          <div class="weiDiv">
            <h2> 牌子管理</h2>
          </div>
          <div>

          </div>

        </el-header>
        <div class="weiButton">
          <div class="rightButton">
            <el-button type="primary" @click="divAvailable=true">创建牌子</el-button>
          </div>

        </div>
        <el-main>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待审" name="zero">
              <div>
                <table class="gridtable">
                  <tr>
                    <th>创建日期</th>
                    <th> 原煤单价(元/吨)</th>
                    <th> 投标数量(万吨)</th>
                    <th> 操作</th>
                  </tr>
                  <tr v-for="item in listdataProp" v-if="item.propstatus==-1">
                    <td>{{item.createTime}}</td>
                    <td>{{item.unitPrice}}</td>
                    <td>{{item.supplyQuantity}}</td>
                    <td>
                      <el-button size="small" type="danger" @click="downProp(item)">下架</el-button>
                      <el-button size="small" type="success" @click="openDetail(item)">查看</el-button>
                    </td>
                  </tr>
                </table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="在挂" name="first">
              <div>
                <table class="gridtable">
                  <tr>
                    <th>创建日期</th>
                    <th> 原煤单价(元/吨)</th>
                    <th> 投标数量(万吨)</th>
                    <th> 操作</th>
                  </tr>
                  <tr v-for="item in listdataProp" v-if="item.propstatus==0">
                    <td>{{item.createTime}}</td>
                    <td>{{item.unitPrice}}</td>
                    <td>{{item.supplyQuantity}}</td>
                    <td>
                      <el-button size="small" type="danger" @click="downProp(item)">下架</el-button>
                      <el-button size="small" type="success" @click="openDetail(item)">查看</el-button>
                    </td>
                  </tr>
                </table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="被摘" name="second">
              <div>
                <table class="gridtable">
                  <tr>
                    <th>创建日期</th>
                    <th> 原煤单价(元/吨)</th>
                    <th> 投标数量(万吨)</th>
                    <th> 摘取方</th>
                    <th> 操作</th>
                  </tr>
                  <tr v-for="item in listdataProp" v-if="item.propstatus==1">
                    <td>{{item.createTime}}</td>
                    <td>{{item.unitPrice}}</td>
                    <td>{{item.supplyQuantity}}</td>
                    <td>{{item.supplierName}}</td>
                    <td>

                      <el-button size="small" type="success" @click="openDetail(item)">查看</el-button>
                    </td>
                  </tr>
                </table>
              </div>


            </el-tab-pane>
            <el-tab-pane label="售出" name="third">

              <div>
                <table class="gridtable">
                  <tr>
                    <th>创建日期</th>
                    <th> 原煤单价(元/吨)</th>
                    <th> 投标数量(万吨)</th>
                    <th> 摘取方</th>
                    <th> 操作</th>
                  </tr>
                  <tr v-for="item in listdataProp" v-if="item.propstatus==2">
                    <td>{{item.createTime}}</td>
                    <td>{{item.unitPrice}}</td>
                    <td>{{item.supplyQuantity}}</td>
                    <td>{{item.supplierName}}</td>
                    <td>
                      <div v-if="item.coalstatus=='待发货'">
                        <el-button size="small" type="warning" @click="pushProp(item)">发货</el-button>
                        <el-button size="small" type="success" @click="openDetail(item)">查看</el-button>
                      </div>
                      <div v-else>
                        <el-button size="small" type="info">已发货</el-button>
                        <el-button size="small" type="success" @click="openDetail(item)">查看</el-button>
                      </div>


                    </td>
                  </tr>
                </table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="完成" name="fourth">

              <div>
                <table class="gridtable">
                  <tr>
                    <th>创建日期</th>
                    <th>完成日期</th>
                    <th> 原煤单价(元/吨)</th>
                    <th> 投标数量(万吨)</th>
                    <th> 摘取方</th>
                    <th> 操作</th>
                  </tr>
                  <tr v-for="item in listdataProp" v-if="item.propstatus==3">
                    <td>{{item.createTime}}</td>
                    <td>{{item.finishDate}}</td>
                    <td>{{item.unitPrice}}</td>
                    <td>{{item.supplyQuantity}}</td>
                    <td>{{item.supplierName}}</td>
                    <td>

                      <el-button size="small" type="success" @click="openDetail(item)">查看</el-button>
                    </td>
                  </tr>
                </table>
              </div>

            </el-tab-pane>
            <el-tab-pane label="下架" name="five">

              <table class="gridtable">
                <tr>
                  <th>创建日期</th>
                  <th> 原煤单价(元/吨)</th>
                  <th> 投标数量(万吨)</th>

                  <th> 操作</th>
                </tr>
                <tr v-for="item in listdataProp" v-if="item.propstatus==4">
                  <td>{{item.createTime}}</td>
                  <td>{{item.unitPrice}}</td>
                  <td>{{item.supplyQuantity}}</td>

                  <td>

                    <el-button size="small" type="success" @click="openDetail(item)">查看</el-button>
                  </td>
                </tr>
              </table>


            </el-tab-pane>
          </el-tabs>


        </el-main>
      </el-container>
    </div>
    <el-dialog title="牌子信息" :visible.sync="divSee">
      <el-descriptions title="">
        <el-descriptions-item label="供应数量(万吨)">{{propItem.supplyQuantity}}</el-descriptions-item>
        <el-descriptions-item label="热值(KCal/kg)≥">{{propItem.calorificValue}}</el-descriptions-item>
        <el-descriptions-item label="原煤单价(元/吨)">{{propItem.unitPrice}}</el-descriptions-item>
        <el-descriptions-item label="全硫(%)≤">{{propItem.sulfur}}</el-descriptions-item>
        <el-descriptions-item label="全水分(%)≤">{{propItem.waterContent}}</el-descriptions-item>
        <el-descriptions-item label="运费单价(元/吨)">{{propItem.freightUnitPrice}}</el-descriptions-item>
        <el-descriptions-item label="挥发分最低(%)">{{propItem.volatitleMatterDown}}</el-descriptions-item>
        <el-descriptions-item label="挥发分最高(%)">{{propItem.volatitleMatterUp}}</el-descriptions-item>
        <el-descriptions-item label="空干基灰分(%)≤">{{propItem.ashContent}}</el-descriptions-item>
        <el-descriptions-item label="发货港口">{{propItem.port}}</el-descriptions-item>
        <el-descriptions-item label="产地">{{propItem.placeOrigin}}</el-descriptions-item>
        <el-descriptions-item label="报价保证金（元/吨）">{{propItem.bondNumber}}</el-descriptions-item>
      </el-descriptions>

    </el-dialog>
    <el-dialog title="编辑牌子信息" :visible.sync="divAvailable">
      <div class="weiDivDia">
        <el-form ref="form" :model="form" label-width="120px">
          <div class="divBgColor">
            <el-row>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="供应数量(万吨)">
                    <el-input v-model="form.supplyQuantity" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="热值(KCal/kg)">
                    <el-input v-model="form.calorificValue" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="原煤单价(元/吨)">
                    <el-input v-model="form.unitPrice" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="全硫(%)">
                    <el-input v-model="form.sulfur" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="全水分(%)">
                    <el-input v-model="form.waterContent" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="运费单价(元/吨)">
                    <el-input v-model="form.freightUnitPrice" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="挥发分最低(%)">
                    <el-input v-model="form.volatitleMatterDown" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="挥发分最高(%)">
                    <el-input v-model="form.volatitleMatterUp" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="空干基灰分(%)">
                    <el-input v-model="form.ashContent" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="发货港口">
                    <el-input v-model="form.port" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="产地">
                    <el-input v-model="form.placeOrigin" size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="grid-content bg-purple-light">
                  <el-form-item label="保证金(元/吨)">
                    <el-input v-model="form.bondNumber" size="medium" ></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </div>

          <div>
            <el-descriptions title="缴纳保证金">
              <el-descriptions-item label="账户余额">{{saleBond.accountBalance}}</el-descriptions-item>
              <el-descriptions-item label="未冻结金额">{{saleBond.unfrozenAmount}}</el-descriptions-item>
              <el-descriptions-item label="届约冻结金额">{{saleBond.contractFrozenAmount}}</el-descriptions-item>
              <el-descriptions-item label="本次需缴纳保证金" >{{meg}}</el-descriptions-item>
            </el-descriptions>
          </div>


          <div class="weiButton">
            <el-form-item>
              <el-button @click="divAvailable = false">取消</el-button>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-dialog>


  </div>


</template>

<script>
  import Common from '@/components/common/Common'

  export default {
    name: "SellerGoodsManagement",
    data() {
      return {
        activeName: 'zero',
        input1: '',
        input2: '',
        input3: '',
        select: '',
        userInfo: Common.userInfo,
        divAvailable: false,
        divSee: false,
        listdataProp: [],
        propItem: {},
        saleBond: {},
        payBond: 0,
        form: {
          name: '',
          userid: Common.userInfo.id,
          supplyQuantity: '',
          calorificValue: '',
          unitPrice: '',
          sulfur: '',
          placeOrigin: '',
          freightUnitPrice: '',
          volatitleMatterDown: '',
          volatitleMatterUp: '',
          port: '',
          ashContent: '',
          waterContent: '',
          propstatus: '-1',//表示待审核
          coalstatus: '待发货',
          evaluate: '',
          bondNumber: ''
        }
      };
    },
    computed: {
      meg:function(){
       return this.payBond=this.form.bondNumber*this.form.supplyQuantity*10000;
      }


    },
    mounted: function () {
      this.payBond = this.form.bondNumber;
      this.loadAllPropByUserid();//需要触发的函数
      this.getBond();
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      openDetail(item) {
        console.log("$", item)
        this.propItem = item;
        this.divSee = true;
      },
      onSubmit() {
        var data = JSON.stringify(this.form);
        console.log("#@#", data);
        this.axios.post(Common.API+'prop/addPropAnduserid', data,
          {headers: {'Content-Type': 'application/json;charset=UTF-8'}})
          .then(response => {
            console.log("#", response.data);
            if (response.data.code == 200) {
              this.$message(response.data.msg);
              this.divAvailable = false;
              this.loadAllPropByUserid();//需要触发的函数
            }
          })
          .catch(function (error) { // 请求失败处理
            this.$message('请求失败！');
            console.log(error);
          });


      },
      loadAllPropByUserid() {
        var userid = this.userInfo.id;
        this.axios.get(Common.API+'prop/loadPropByStatusAndOrder?userid=' + userid)
          .then(response => {
            console.log("查询成功1", response.data);
            this.listdataProp = response.data.data;

            // (this.info = response)
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
      },
      downProp(item) {
        this.$confirm('此操作将永久下架该牌子, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var data = JSON.stringify(item)
          this.axios.post(Common.API+'prop/downPropByUserid', data,
            {headers: {'Content-Type': 'application/json;charset=UTF-8'}})
            .then(response => {
              console.log("#", response.data);
              if (response.data.code == 200) {
                this.$message(response.data.msg);
                this.loadAllPropByUserid();//需要触发的函数
              }
            })
            .catch(function (error) { // 请求失败处理
              this.$message('请求失败！');
              console.log(error);
            });

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下架'
          });
        });


      },
      pushProp(item) {//卖方发货
        var data = JSON.stringify(item)
        this.axios.post(Common.API+'prop/updatePropCoalstatusByUserid', data,
          {headers: {'Content-Type': 'application/json;charset=UTF-8'}})
          .then(response => {
            console.log("#", response.data);
            if (response.data.code == 200) {
              this.$message(response.data.msg);
              this.loadAllPropByUserid();//需要触发的函数
            }
          })
          .catch(function (error) { // 请求失败处理
            this.$message('请求失败！');
            console.log(error);
          });
      },
      getBond() {
        // saleBond

        this.axios.get(Common.API+'cbond/getBond?enId=' + Common.enterpriseInfoSale.enterpriseId)
          .then(response => {
            // console.log("&*&:", response.data.data)
            this.saleBond = response.data.data;
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });

      }
    }
  }
</script>

<style scoped>
  .wrapper {
    width: 95%;
    margin: auto;
    padding: 0;
  }

  /*布局*/
  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /*搜索框*/
  .el-select .el-input {
    width: 130px;
  }

  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  /*按钮微调*/
  .weiButton {
    /*margin-top: 55px;*/
    width: 100%;
    /*float: right;*/
  }

  .rightButton {
    margin-right: 10%;
    float: right;
  }

  .weiDiv {
    margin-top: 30px;
    margin-left: 40%;

  }

  .divBgColor {
    /*padding: 5px;*/
    padding-right: 5px;
    padding-top: 5px;
    background-color: #E5E9F2;
    margin-bottom: 10px;
  }

  .weiDivDia {

    padding-bottom: 30px;
  }

  /*表格*/
  .gridtable {
    width: 99%;
  }

  table.gridtable {

    /*font-family: verdana, arial, sans-serif;*/
    font-size: 11px;
    color: #909399;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
  }

  table.gridtable th {

    padding: 8px;
    border: none;
    text-align: left;
    font-size: 14px;
  }

  table.gridtable td {
    font-size: 14px;
    padding: 8px;
    color: #666666;;
    border-color: white;
    background-color: #ffffff;
    border: none;

    border-top: 0.1px solid #E4E7ED;
    border-bottom: 0.1px solid #E4E7ED;

  }


</style>
